<template>
  <div>
    <div class="shop text-right">
      <button @click="btn">登录</button>|
      <button @click="btn1">注册</button>
    </div>
    <!-- 标题 轮播 -->
    <div>
      <!-- 页头 -->
      <div class="container">
        <div class="row1">
          <div class="tu">
            <a href="">
              <img src="../assets/images/logo.png" alt="" />
            </a>
          </div>
          <div class="tt">
            <div class="top_tel">
              <img src="../assets/images/tel.png" alt="" />
              <span>全国服务热线：</span>
              <p>400-000-0000</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 导航 -->
      <div class="nav1">
        <div class="center">
          <ul @click="switchNavActive">
            <li
              v-for="(item, index) in navList"
              :key="index"
              :class="{ navActive: index == navActive }"
            >
              <router-link
                :to="item.to"
                :data-index="index"
                :class="{ navActive: index == navActive }"
                >{{ item.text }}</router-link
              >
              <ul v-if="item.SecondaryMenu">
                <li v-for="(menu, index) in item.SecondaryMenu" :key="index">
                  <a href="#">{{ menu.text }}</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 根据路由更改组件内容 -->
    <transition>
      <router-view></router-view>
    </transition>
    <!-- 底部 -->
    <footer>
      <div>
        <img src="../assets/images/logo_foot.png" class="footer_logo" />
        <p class="footer_logo_text"></p>
        <p>Copyright © 2012-2021 开封鲜花配送有限公司 版权所有</p>
        <p></p>
      </div>
      <div>
        <p>联系人：X先生</p>
        <p>手机：400-0112-0000</p>
        <p>电话：13434590085</p>
        <p>邮箱：admin@91674.com</p>
        <p>地址：河南省开封市</p>
      </div>
      <div class="lt">
        <div>
          <p class="footer_menu_first">
            <router-link to="/chanpin">产品展示</router-link>
          </p>
          <p><a href="">产品分类a</a></p>
          <p><a href="">产品分类b</a></p>
          <p><a href="">产品分类c</a></p>
        </div>
        <div>
          <p class="footer_menu_first">
            <router-link to="/xinwen">新闻资讯</router-link>
          </p>
          <p><a href="">公司新闻</a></p>
          <p><a href="">行业新闻</a></p>
          <p><a href="">常见问题</a></p>
        </div>
        <div>
          <p class="footer_menu_first">
            <router-link to="contact">联系我们</router-link>
          </p>
        </div>
      </div>
      <div class="ft">
        <img src="../assets/images/weixin.png" class="footer_qrcode" />
        <p class="footer_qrcode_text">手机二维码</p>
      </div>
    </footer>
    <!-- 客服面板 -->
    <div class="panel">
      <div></div>
      <img src="../assets/images/panel-bg.png" alt="" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navActive: 0,
      navList: [
        {
          text: "网站首页",
          to: "/",
        },
        {
          text: "关于我们",
          to: "/Product",
        },
        {
          text: "产品展示",
          to: "/Chanpin",
          SecondaryMenu: [
            {
              text: "产品分类a",
            },
            {
              text: "产品分类b",
            },
            {
              text: "产品分类c",
            },
          ],
        },
        {
          text: "新闻资讯",
          to: "/XinWen",
          SecondaryMenu: [
            {
              text: "公司新闻",
            },
            {
              text: "行业新闻",
            },
            {
              text: "常见问题",
            },
          ],
        },
        {
          text: "客户案例",
          to: "/Kehu",
        },
        {
          text: "企业相册",
          to: "/Photo",
        },
        {
          text: "留言反馈",
          to: "/News",
        },
        {
          text: "联系我们",
          to: "/Contact",
        },
      ],
    };
  },
  methods: {
    switchNavActive(e) {
      let target = e.target;
      if (target.dataset.index) {
        this.navActive = target.dataset.index;
        console.log(this.navActive);
      }
    },
    btn() {
      this.$router.push("/login");
    },
    btn1() {
      this.$router.push("/register");
    },
  },
  mounted() {},
  watch: {},
};
</script>

<style scoped>
.shop {
  height: 30px;
  background: rgb(233, 227, 227);
  line-height: 30px;
  padding-right: 200px;
}
button {
  font-size: 15px;
}
/* 头部 */
.row1 {
  display: flex;
  justify-content: center;
}
.tu {
  width: 55%;
  position: relative;
  min-height: 1px;
  padding-top: 25px;
}
.tt {
  width: 20%;
  float: left;
  position: relative;
  min-height: 1px;
}
.top_tel {
  float: left;
  margin-top: 38px;
}
.top_tel img {
  float: left;
  margin-left: 8px;
  margin-right: 8px;
  padding-top: 8px;
}
.top_tel span {
  color: #666;
  float: left;
}
.top_tel p {
  margin: 0px;
  float: left;
  color: #d2351f;
  font-size: 25px;
  font-weight: bold;
}
/* 导航 */
.nav1 {
  background: #d2351f;
  height: 50px;
}
.center {
  font-family: arial, sans-serif;
  padding: 0;
  margin: 20px;
  padding-left: 150px;
}
.center ul {
  list-style-type: none;
  text-align: center;
}
.center ul li {
  /*float属性定义元素在哪个方向浮动，浮动元素会生成一个块级框。如果浮动非替换元素，则要
     指明一个明确的宽度，否则会被尽可能的压缩。*/
  float: left;
  position: relative;
  list-style-type: none;
}
.center ul li.navActive {
  background: #231815;
}
.center ul li a,
.center ul li a:visited {
  display: block;
  text-align: center;
  text-decoration: none;
  padding-left: 30px;
  padding-right: 30px;
  color: #fff;
  line-height: 50px;
  font-size: 18px;
}
.center ul li a:hover {
  background: #231815;
}
/*鼠标无动作时不显示*/
.center ul li ul {
  display: none;
  z-index: 1000;
}
/*当鼠标指向第一级li时，第二级ul的动作*/
.center ul li:hover ul {
  display: block;
  position: absolute;
  /* top: 30px; */
  left: 25px;
  width: 125px;
}
.center ul li:hover ul li a {
  display: block;
  background: #231815;
  color: #fff;
  font-size: 14px;
}
.center ul li:hover ul li a:hover {
  background: #d2351f;
  color: #fff;
}
/*clear属性定义了元素的哪边上不允许出现浮动元素。*/
.clear {
  clear: both;
}
/* 底部 */
footer {
  min-width: 1000px;
  height: 200px;
  margin-top: 20px;
  color: #fff;
  padding: 60px 0px 40px 0px;
  background-color: #2b2b2b;
  display: flex;
  justify-content: center;
}
footer > div {
  position: relative;
  padding-right: 20px;
  padding-left: 20px;
}
footer .lt {
  display: flex;
  justify-content: center;
}
footer > div p {
  padding-bottom: 10px;
}
footer .lt > div {
  padding: 0 18px;
}
.footer_logo {
  max-width: 196px;
}
.footer_logo_text {
  width: 196px;
  text-align: center;
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid #fff;
  line-height: 22px;
  color: #fff;
}
.lt {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.lt a {
  color: #fff;
  text-decoration: none;
}
.lt a:hover {
  color: #d2351f;
}
.footer_menu_first {
  font-weight: bold;
}
.footer_qrcode {
  max-width: 130px;
}
.ft {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.footer_qrcode_text {
  width: 130px;
  text-align: center;
  margin-top: 15px;
}
.panel {
  position: fixed;
  bottom: 230px;
  right: 20px;
  z-index: 9999;
}
</style>